<template>
  <el-card
    class="box-card"
    shadow="never"
    :style="{ width: width + 'px', height: height + 'px' }"
  >
    <div class="chart-box" ref="bar" :style="{ height: height + 'px' }"></div>
  </el-card>
</template>

<script>
import * as echarts from 'echarts'
export default {
  name: 'EchartView',
  props: {
    width: {
      type: Number,
      default: 1200
    },
    height: {
      type: Number,
      default: 500
    },
    data: {
      type: Array,
      required: true
    }
  },
  data () {
    return {}
  },
  methods: {},
  mounted () {
    const myChart = echarts.init(this.$refs.bar)
    const option = {
      title: {
        text: '商品单日销量'
      },
      tooltip: {},
      xAxis: {
        data: this.data.map(v => v.name)
      },
      yAxis: {},
      series: [
        {
          name: '销量',
          type: 'bar',
          data: this.data.map(v => v.value)
        }
      ]
    }
    myChart.setOption(option)
  }
}
</script>

<style lang="less" scoped></style>
